{% extends "base.html" %}
{% block title %}Gastos{% endblock %}
{% block head %}
    {{ super() }}
    
	<script type="text/javascript" src="/assets/js/jquery.js"></script>
  	<script type="text/javascript" src="/assets/js/jquery.validate.js"></script>

 	<script>
		$(document).ready(function() {   
			$("#form1").validate({   
				rules: {description: {required: true},
					    category: {required: true}, 
					    amount: {required: true,
					    		 number:true},  
				},   
				messages: {description: "Este campo es obligatorio",
					       category: "Este campo es obligatorio",
						   amount: {required:"Este campo es obligatorio",
						   		    number:"Numero valido"
						   		   }
						  }   
				}
			);   
		}); 
  </script>
		    
{% endblock %}
{% block content %}
	<h1>Gastos</h1>
	<br>
	<form id="form1" action="/expense/edit" method="post">
	<input type="hidden" name="id_expense" value="{% if expense.is_saved() %} {{expense.key().id()}} {% else %} -1 {% endif %}" />
	<input type="hidden" name="id_month"  value="{{expense.month.key().id()}}" />
    	<table>
      		<tr>
      			<td><label>Descripcion*</label></td>
      			<td><input type="text" style="width: 300px" name="description" value ={% if expense.description ==None %} "" {%else%} "{{expense.description}}" {%endif%} /></td>
      		</tr>
      		<tr>
      			<td><label>Importe*</label></td>
      			<td><input type="text" name="amount" value ={% if expense.amount ==None %} "" {%else%} "{{expense.amount}}" {%endif%} /></td>
      		</tr>
      		<tr>
      			<td><label>Categoria*</label></td>
      			<td>
					<select style="width: 300px" name="category">
					{% for c in categories %}
					  <option value="{{c.key().id()}}" {% if c.name ==expense.category.name %} selected="selected" {% endif %}  >{{c.name}}</option>
					{% endfor %}
					</select>
				</td>
      		</tr>
      		<tr>
      			<td><label>Comentario</label></td>
      			<td><input type="text" style="width: 300px" name="comment" value ={% if expense.comment ==None %} "" {%else%} "{{expense.comment}}" {%endif%} /></td>
      		</tr>
      	</table>
      	<br>
        <table>
        	<tr>
        		<td><input name="btnSave" type="submit" value="Guardar" /> </td>
        		<td><input class="cancel" name="btnCancel" type="submit" value="Volver" /></td>
        		<td>{% if expense.is_saved() %}
        		       <input class="cancel" name="btnDelete" type="submit" value="Eliminar" />
        		    {% endif %}
        		</td>        

        	</tr>
        </table>
	</form>
    <br>
{% endblock %}
